import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { ref, watch } from 'vue';
import useProjection from './useProjection';
import useTileGrid from './useTileGrid';

export default function () {

    const {
        proj4326
    } = useProjection()

    const { tileGrid } = useTileGrid()


    const routeTileImageSource = new XYZ({
        tileUrlFunction: function (tileCoord) {
            const z = tileCoord[0]
            const x = tileCoord[1]
            const y = Math.abs(tileCoord[2]) //
            // let url = mapStore.mapTileUrl + '/tiles/label/' + z + '/' + x + '/' + y
            // let url = 'http://192.168.0.111:8001' + '/tiles/label/' + z + '/' + x + '/' + y
            const url = '/tiles/label/' + z + '/' + x + '/' + y

            return url
        },
        tileGrid: tileGrid,
        projection: proj4326?.getCode(),
    })
    const labelLayer = new TileLayer({
        source: routeTileImageSource,
        minZoom: 1,
        maxZoom: 18,
        zIndex: 9,
    })


    return {
        labelLayer
    }

}